<template>
  <a-modal v-model="visible" title="跳题规则设置" @ok="handleOk" width="800px">
    <div class="_pt-9 _pb-9 _pl-16 _pr-16 _mb-20" style="background-color: #FFF7E8;">
      <div>
        <a-icon type="exclamation-circle" class="fz-16" theme="filled" style="color: #FF7D00;" />
        <span class="fz-14 _ml-8">一个选项可以关联显示一个或多个题目，当填写者选中指定项时，被关联题目才会显示；</span>
      </div>
      <div class="_pl-24">
        <span class="fz-14">所有选项都不关联的题目，将会默认显示；</span>
      </div>
    </div>
    <div>
      <div class="fz-16 fw-7 _mb-20">题目标题：{{ item.showName || item.name }}</div>
      <div
        v-for="(answeritem, index) in item.customFormItemAnswerDtoList"
        :key="index"
        class="_p-20 _mb-20"
        style="background-color: #F7F8FA;"
      >
        <div class="disFlx gap-10 _mb-10">
          <div class="width-12">选项{{ index + 1 }}：</div>
          <div>{{ answeritem.words }}</div>
        </div>
        <div class="disFlx gap-10">
          <div class="width-12">显示题目：</div>
          <div style="flex: 1;">
            <a-select
              v-if="visible"
              v-model="answeritem.indexs"
              mode="multiple"
              placeholder="请选择"
              style="width: 100%"
            >
              <a-select-option
                v-for="(questionItem, questionItemIndex) in fieldList"
                :value="questionItem.sort"
                :key="buildUUID()"
              >
                {{ questionItem.sort + 1 }}.{{ questionItem.showName || questionItem.name }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { buildUUID } from '@/utils/uuid'
import { cloneDeep } from 'lodash-es'

export default {
  data() {
    return {
      visible: false,
      fieldList: [],
      item: {}
    }
  },

  methods: {
    buildUUID,
    handleOk() {
      this.visible = false
      this.item.customFormItemAnswerDtoList.forEach(answeritem => {
        if (answeritem.indexs) {
          answeritem.relatedFormItemIds = answeritem.indexs.join(',')
        }
      })
      this.$emit('setRuleSuccess', this.item)
    },
    open(item, fieldList) {
      item.customFormItemAnswerDtoList.forEach(answeritem => {
        if (answeritem.relatedFormItemIds) {
          answeritem.indexs = answeritem.relatedFormItemIds.split(',').map(id => Number(id))
        } else {
          answeritem.indexs = []
        }
      })
      this.visible = true
      this.fieldList = cloneDeep(fieldList)
      this.item = cloneDeep(item)
    }
  }
}
</script>
